In this tutorial, we will learn how to toggle the visibility of passwords in password input fields by changing the input field type attribute from ‘password’ to ‘text’ using Vue.js
How to Add Eye Icon in Password Field using Vue Js?
This Vue.js code below demonstrates how to show or hide a password in an input field by clicking on a button. See the example below and edit the code with the ‘Tryit’ editor.
Vue Js Show Hide Password Example
<div id="app">
<div class="input-group">
<input :type="showPassword ? 'text' : 'password'" v-model="password" placeholder="Enter your password">
<i class="icon " :class="showPassword ? 'fa-solid fa-eye-slash' : 'fa-solid fa-eye'"
@click="showPassword = !showPassword"></i>
</div>
</div>
<script type="module">
const app = Vue.createApp({
data() {
return {
password: '',
showPassword: false
};
}
});
app.mount("#app");
</script>
Output of Vue Show Password Button Inside Input
